<template>
  <div class="userTable">
    <userHeader />
    <div class="breadClum">
      <span>
           <router-link :to="{path:'/pageIndex'}" > <a class="bread1">当前位置：首页  >  </a></router-link>
          <a class="bread2">流程目录</a>
      </span>
    </div>
    <div class="navList">
      <span class="sp1" @click.stop="addCatelogo">添加流程</span>
      <span @click.stop="editorCate">编辑流程</span>
      <span @click.stop="mergeProcess">合并流程</span>
      <span @click.stop="deleteProcess" style="margin-right: 10px">删除流程</span>
      <span class="green" @click.stop="defineBaseData">定义基础数据</span>
      <!--<router-link :to="{path:'/batchData'}">-->
      <span class="green" style="margin-right: 15px" @click.stop="batchDefinitionAll">批量定义基础数据</span>
      <span class="yellow"  @click.stop="navtoCxcs">定义穿行测试模板</span>
      <!--</router-link>-->
    </div>

    <el-table
      :cell-class-name="cell"
      :row-class-name="tableRowClassName"
      :row-style="showRow"
      ref="tableData3"
      :data="formatData"
      stripe=""
      :height="height"
      v-loading="loading"
      @selection-change="handleSelectionChange"
       style="width: 100%">
      <el-table-column
        type="selection"
        width="70">
      </el-table-column>
      <el-table-column
        fixed
        prop="element_name"
        label="控制元素"
        width="125">
      </el-table-column>
      <el-table-column
        prop="process_num"
        label="项目编号"
        width="195">
      </el-table-column>
      <el-table-column label="流程目录"
         :render-header="renderHeaderOne"
         >
        <el-table-column
          prop="first_process"
          label="一级流程"
          width="170">
          <template slot-scope="scope" >
            <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.first_process.process_name class="lc-text">
                    <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                    <img src="../../static/images/reduce.png" alt="" v-else>
                <span>{{scope.row.first_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="second_process"
          label="二级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.second_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
               <span>{{scope.row.second_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="third_process"
          label="三级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.third_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
              <span>{{scope.row.third_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fourth_process"
          label="四级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.fourth_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
               <span> {{scope.row.fourth_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fifth_process"
          label="五级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.fifth_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
               <span>{{scope.row.fifth_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="process_level"
        label="级别"
        width="85">
      </el-table-column>
      <el-table-column
        prop="affect_extent"
        label="影响程度"
        width="125">
      </el-table-column>
      <el-table-column
        prop="control_effect"
        label="控制效果"
        width="125">
      </el-table-column>
      <el-table-column></el-table-column>
    </el-table>
    <!--<fixed />-->
    <el-dialog :title=title :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="addform" :rules="rules" ref="addform">
        <el-form-item label="流程名称" :label-width="formLabelWidth" prop="process_name">
          <el-input v-model="addform.process_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="控制元素" :label-width="formLabelWidth" prop="element_id">
          <el-select v-model="addform.element_id" placeholder="请选择控制元素" @change="selectEle">
                <el-option v-for="(item,index) in elementData" :key="index" :label=item.element_name :value=item.element_id></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级流程" :label-width="formLabelWidth" prop="process_pid"  >
          <el-tree
            :data="data3"
            :props="defaultProps"
            :show-checkbox="true"
            default-expand-all
            :check-on-click-node="true"
            node-key="process_id"
            ref="tree"
            @check-change="setCheckedKeys"
            @node-click="nodeClick"
            :expand-on-click-node="false"
            :check-strictly=true
            highlight-current
            @current-change="changeCurrent">
          </el-tree>
        </el-form-item>
        <el-form-item label="流程编号" :label-width="formLabelWidth" prop="process_num">
          <el-input v-model="addform.process_num" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="confirmAdd('addform')">确 定</el-button>
      </div>
    </el-dialog >
    <el-dialog title="请选择控制点" :visible.sync="dialogFormVisible2"  >
      <el-form :model="addform2"  ref="addform2" :rules="rules2">
        <el-form-item  prop="controls">
        <el-radio-group v-model="radio2" >
          <el-radio :value="item.control_id" :label="item.control_id" v-for="(item,index) in addform3" :key="index">{{item.control_title}}</el-radio>
          <el-radio  value="0" label="0">其他</el-radio>
        </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAdd2('addform2')">确 定</el-button>
      </div>
    </el-dialog>
    <div class="e-tips" v-if="eTips" @click.stop="eTips=false">
        <p class="e-tips-block">
          <span>{{eTipsText}}</span>
        </p>
    </div>
  </div>
</template>
<script>

  import userHeader from '@/components/header.vue'
  import treeToArray from '@/page/test/catalog.js'
  import {strToHexCharCode,toFixedBit,dec2hex,formatTime,getNewDate } from  '@/utils/index.js';
  import {mapState} from 'vuex';
  export default({
    data (){
      //控制点单选框设置
      var checkControRadio =(rule, value, callback) => {
        if(this.radio2==undefined ||this.radio2==''){
          return callback('请选择控制点')
        }else{
          callback()
        }
      };
        var checkProcessName =(rule, value, callback) => {
            if(value==undefined ||value==''){
              return callback('请输入流程名称')
            }else{
                callback()
            }
        };
      var checkElementId =(rule, value, callback) => {
        if(value==undefined ||value==''){
          return callback('请选择控制元素')
        }else{
          callback()
        }
      };
      var checkProcessId =(rule, value, callback) => {
          console.log(this.$refs.tree.getCheckedNodes())
        if(this.$refs.tree.getCheckedNodes().length==0){
          return callback(new Error('请选择评价单位'));
        }else{
          callback()
        }
      };
      var checkProcessNum =(rule, value, callback) => {
        if(value==undefined ||value==''){
          return callback('请输入流程编号')
        }else{
          callback()
        }
      };
      return {
        title:'添加流程',
        multipleSelection:[],
        randomArray:'',
        eTips:false,
        eTipsText:'请先选择你需要合并的流程',
        currentNodeKey:'',
        dialogFormVisible:false,
        dialogFormVisible2:false,
        strictly:true,
        show1:false,
        formLabelWidth:'160px',
        showFlag:false,
        showTooltip:false,
        isEditor:false,
        loading:true,
        i:0,
        id:0,
        defaultElement:'',
        selectedParent:'',
        editorProcess_id:'',
        addform:{
          elements:{},
          itemNo:'',
          process:'',
          progress:''
        },
        addform2:{},
        addform3:{},
        rules: {
          process_name:[
            { required: true,validator:checkProcessName,trigger: 'blur'}
          ],
          element_id:[
            { required: true,validator:checkElementId,trigger: 'blur'}
          ],
//          process_pid:[
//            { required: true,validator:checkProcessId,trigger: 'blur'}
//          ],
          process_num:[
            { required: true,validator:checkProcessNum,trigger: 'blur'}
          ],


        },
        rules2:{
          controls:[
            { required: true,validator:checkControRadio}
          ],
        },
        data3: [ ],
        defaultProps: {
          children: 'son_process',
          label: 'process_name'
        },
        tableData3: [],
        elementData:[],
        isMerge:false,
        radio2:"",
        mergeParams:"",
        minLength:0,
        maxLength:0,
      }
    },
    components:{
      userHeader,
    },
    methods:{
      navtoCxcs(){
        this.$router.push({
          path:'/cxcsTemplate',
        })
      },
      cell({row, column, rowIndex, columnIndex}) {
        //第八列添加 red 类
        if(columnIndex==3||columnIndex==4 ||columnIndex==5||columnIndex==6||columnIndex==7){
          return "e-table-align-left"
        }

      },
      handleClose(){
        this.addform={}
        this.$refs.tree.setCheckedNodes([]);
        this.dialogFormVisible=false
        this.$refs.tableData3.clearSelection();
      },
      handleClose2(){
        this.addform2={}
        this.dialogFormVisible2=false
      },
      tableRowClassName ({row, rowIndex}) {
        //把每一行的索引放进row
        row.index = rowIndex;
      },
      changeCurrent(data,node){
          console.log(data)
          console.log(node.parent)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      setCheckedKeys(data,checked,node){
          console.log(data)
        if(checked == true){
          this.checkedId = data.process_id;
          this.$refs.tree.setCheckedNodes([data]);
        }

      },
      nodeClick(data){
        this.checkedId = data.process_id
        this.$refs.tree.setCheckedNodes([data]);
      },
      showRow: function(row) {
        const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
        row.row._show = show
        return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
      },
      // 切换下级是否展开
      toggleExpanded: function(trIndex) {
        const record = this.formatData[trIndex]
        record._expanded = !record._expanded
      },
      // 图标显示
      iconShow(index, record) {
        return ( record.son_process && record.son_process.length > 0)
      },
      selectEle(val){
        console.log(val)
        this.choiseCate(val)
      },
      choiseCate(id){
        console.log(id);
        this.axios.get('/api/v1/flow/processflat/'+`${id}`)
          .then((res)=>{
            if(res.data.code==0){
                  this.data3 =res.data.data;
            }
          })

      },
      //合并流程操作
      merge(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.put('/api/v1/flow/processmerge/'+`${this.mergeParams}`,
              {
                process_name:this.addform.process_name,
//              流程名称
                process_num:this.addform.process_num,
//                流程编号
                element_id:this.addform.element_id,
//              控制元素id
                process_pid:this.checkedId||0,
//                上级流程id
                control_id:this.radio2,
              })
              .then((res)=>{
                console.log(res.data)
                this.dialogFormVisible=false
                if(res.data.code==0){
                  this.form={}
                  this.$refs.tree.setCheckedNodes([]);
                  this.initData();
                  this.$refs.tableData3.clearSelection();
                  this.radio2="";
                  this.mergeParams="";
                }else{
                  this.form={}
                  this.$refs.tree.setCheckedNodes([]);
                  this.$refs.tableData3.clearSelection();
                  this.radio2="";
                  this.mergeParams="";
                  this.$alert(res.data.message, '提示', {
                    confirmButtonText: '确定'
                  })
                }
              })
          }
        });

      },
      confirmAdd(formName){
        console.log(this.checkedId);
        let that =this;
        this.i=0;
        //判断编辑还是添加
        if(this.isEditor){
          this.$refs[formName].validate((valid) => {
            if (valid) {
//              this.axios.put('/api/v1/flow/process/',
              this.axios.put('/api/v1/flow/process/'+`${this.editorProcess_id}`,
                {
                  process_name:this.addform.process_name,
                  process_num:this.addform.process_num,
                  element_id:this.addform.element_id,
                  process_pid:this.checkedId,
                })
                .then((res)=>{
                  console.log(res.data)
                  this.dialogFormVisible=false
                  if(res.data.code==0){
                    this.form={}
                    this.initData();
                    this.$alert(res.data.message,'提示')
                  }else{
                    this.form={}
                    this.$alert(res.data.message, '提示', {
                      confirmButtonText: '确定'
                    })
                  }
                }).then((res)=>{
                  this.isEditor =false
              })
            }
          });
        }else {
          if (this.isMerge) {
              //合并流程
            this.merge('addform')
          } else {
          //添加流程
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.axios.post('/api/v1/flow/process',
                {
                  process_name: this.addform.process_name,
                  process_num: this.addform.process_num,
                  element_id: this.addform.element_id,
                  process_pid: this.checkedId||0,
                })
                .then((res) => {
                  console.log(res.data)
                  this.dialogFormVisible = false
                  if (res.data.code == 0) {
                    this.form = {}
                    this.addform = {}
                    this.initData();
                  } else {
                    this.form = {}
                    this.$alert(res.data.message, '提示', {
                      confirmButtonText: '确定'
                    })
                  }
                }).then((res) => {
                this.isEditor = false
              })
            }
          });
        }
        }

      },
      confirmAdd2(formName){
        //合并时候确定控制点contro_radio
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.dialogFormVisible2 =false;
            this.dialogFormVisible =true;
            this.getCatalogData();
            this.title="合并流程";

          }
        });
      },
      cancelAdd(){
        this.form ={}
        this.dialogFormVisible =false
      },
      getRandom(){
        this.randomArray =''
        var array =['1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
        for(var i=0;i<4;i++){
          this.randomArray+= array[parseInt(Math.random()*array.length)]
        }
        return (this.randomArray)
      },
      openData(){
          console.log(123)
      },
        //添加流程
      addCatelogo(){
        this.dialogFormVisible =true
        this.title="添加流程"
        this.getCatalogData()
      },
//      删除流程
      deleteProcess(){
          var params='';
          if(this.multipleSelection.length==0){
              this.$alert('请选择需要删除的流程目录','提示')
          }else if(this.multipleSelection.length>1){
          //批量删除
            //不允许直接删除父级流程
            for(var i in this.multipleSelection){
                if(this.multipleSelection[i].son_process.length>=1){
                  this.$alert('不允许直接删除含有子级流程的流程目录','提示')
                  return false
                }else{
                    if(i==this.multipleSelection.length-1){
                      params +=this.multipleSelection[i].process_id
                    }else{
                      params +=this.multipleSelection[i].process_id+','
                    }
                }
            }
            console.log(params)
            this.deleteAction(params)
          }else{
             //一个删除
            //不允许直接删除父级流程
            if(this.multipleSelection[0].son_process.length>=1){
              this.$alert('不允许直接删除含有子级流程的流程目录','提示')
            }else{
              params =this.multipleSelection[0].process_id
              this.deleteAction(params)
            }
            console.log(this.multipleSelection[0])
          }

      },
      //树状结构流程目录读取
      getCatalogData(){
        this.axios.get('/api/v1/flow/processflat')
          .then((res)=>{
            if(res.data.code==0){
              console.log(res.data.data)
              this.data3 =res.data.data
            }else{
              this.$alert(res.data.message,'提示')
            }
          })
          .catch((err)=>{
            this.$alert(err.message,'提示')
          })
      },
//      编辑流程
      editorCate(){
          if(this.multipleSelection.length==0){
            this.$alert('请选择需要编辑的流程目录','提示')
          }else if(this.multipleSelection.length>1){
            this.$alert('一次只能编辑一条流程','提示')
          }else{
              this.getCatog(this.multipleSelection[0].process_id);
              this.editorProcess_id =this.multipleSelection[0].process_id;
              console.log()
              this.dialogFormVisible =true;
              this.isEditor=true;
              this.title ='编辑流程';
              this.getCatalogData();
          }
      },
//      定义基础数据拦截
      defineBaseData(){
        if(this.multipleSelection.length==0){
            this.$alert('请选择需要定义基础数据的流程','提示')
        }  else if(this.multipleSelection.length>1){
          this.$alert('一次只能定义一条流程的基础数据','提示')
        }else {
          this.$router.push({
            path:'/defineBaseData',
            query:{
                process_id:this.multipleSelection[0].process_id
            }
          })
        }
      },
      batchDefinitionAll(){
        this.$router.push({
          path:'/batchData'
        })
//        if(this.multipleSelection.length==0){
//          this.$alert('请选择需要批量定义基础数据的流程','提示')
//        }  else if(this.multipleSelection.length>1){
//          this.$alert('一次只能定义一条流程的基础数据','提示')
//        }else {
//           console.log(this.multipleSelection[0])
//            if(this.multipleSelection[0].parent.fourth_process.process_name){
//              this.$alert('不允许定义末级流程','提示')
//              return false
//            }
//          this.$router.push({
//            path:'/batchData',
//            query:{
//              process_name:this.multipleSelection[0].first_process.process_name
//              ||this.multipleSelection[0].second_process.process_name
//              ||this.multipleSelection[0].third_process.process_name
//              ||this.multipleSelection[0].fourth_process.process_name
//              ||this.multipleSelection[0].fifth_process.process_name,
//              process_id:this.multipleSelection[0].process_id,
//            }
//          })
//        }
      },
      //获取指定流程的详细信息
      getCatog(id){
          let that =this
        this.axios.get('/api/v1/flow/process/'+`${id}`)
          .then((res)=>{
            if(res.data.code==0){
              this.addform =res.data.data
              console.log(res.data.data.process_id);
              this.checkedId =res.data.data.process_pid;
              that.$refs.tree.setCheckedKeys([res.data.data.process_pid]);
              console.log(res.data.data)
            }else{
              this.$alert(res.data.message,'提示')
            }
          }).then((res)=>{
          this.$refs.tableData3.clearSelection();
        })
          .catch((err)=>{
            this.$alert(err.message,'提示')
            this.$refs.tableData3.clearSelection();
          })
      },
      deleteAction(params){
        this.axios.delete('/api/v1/flow/process/'+`${params}`)
          .then((res)=>{
            this.$alert(res.data.message,'提示')
            console.log(this.multipleSelection)
            console.log(this.tableData3)
            if(res.data.code==0){
              //批量删除
              for(var k in this.multipleSelection){
                for(var j in this.formatData){
                  if(this.multipleSelection[k].process_id==this.formatData[j].process_id){
                      this.formatData.splice(j,1)
                  }
                }
              }
            }else{
              this.$alert(res.data.message,'提示')
            }
          }).then((res)=>{
          this.$refs.tableData3.clearSelection();
        })
          .catch((err)=>{
            this.$alert(err.message,'提示')
            this.$refs.tableData3.clearSelection();
          })
      },
      choiseCheck(row){
//          console.log(selection,row)
      },
      renderHeaderOne (h, {column, $index}) {
        return h('span', [
          h('span', column.label),
          h('span', {
            class: 'addIcon',
            on: {
              click: () => {
                  console.log(this.formatData[0]._expanded)
                for(var i in this.formatData){
                  this.formatData[i]._expanded=!this.formatData[i]._expanded
                };
                if(!this.formatData[0]._expanded){
                    this.$store.commit('changeHeight',{
                     height:((100+this.minLength*50)>(this.height)?this.height:(100+this.minLength*50))
                    })
                }else{
                  var height =document.documentElement.clientHeight||document.body.clientHeight;
                  this.$store.commit('changeHeight',{
                    height:height
                  })
                }
              }
            }
          })
        ])
      },
      //获取流程列表
      initData(){
        this.axios.get('/api/v1/flow/process')
          .then((res)=>{
            if(res.data.code==0){
              this.tableData3 =res.data.data;
              this.minLength =res.data.data.length;
              console.log(this.minLength)
              console.log(this.tableData3);
              this.loading =false;
            }else{
              this.$alert(res.data.message,'提示')
            }
          }).catch((err)=>{
          this.$alert(err.message,'提示')
        })
      },
      //获取控制元素列表
      getElementData(){
        this.axios.get('/api/v1/flow/element')
          .then((res)=>{
            if(res.data.code==0){
              this.elementData =res.data.data
              console.log(this.elementData)
            }else{
              this.$alert(res.data.message,'提示')
            }
          }).catch((err)=>{
          this.$alert(err.message,'提示')
        })
      },
      mergeProcess(){
        // 合并流程
        var params=''
       if(this.multipleSelection.length==0){
         this.eTips=true
       }else if(this.multipleSelection.length==1){
        this.$alert('请至少选择两项目录进行合并','提示')
       }
       else {
//           this.dialogFormVisible =true
            this.isMerge =true
           for(var i in this.multipleSelection){
             if(i==this.multipleSelection.length-1){
               params +=this.multipleSelection[i].process_id
             }else{
               params +=this.multipleSelection[i].process_id+','
             }
           }
//          首先合并流程控制点列表
          this.mergeContrl(params);

       }
      },
      mergeContrl(params){
        this.mergeParams =params;
        this.dialogFormVisible2=true
        this.axios.get('/api/v1/flow/processmerge/'+`${params}`)
          .then((res)=>{
            if(res.data.code==0){
              console.log(res.data.data)
              this.addform3=res.data.data;
            }else{
              this.$alert(res.data.message,'提示')
            }
          }).catch((err)=>{
          this.$alert(err.message,'提示')
        })
      }
    },
    computed:{
      ...mapState({
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
      formatData: function() {
        let tmp;
        console.log('`````````````')
        if (!Array.isArray(this.tableData3)) {
          tmp = [this.tableData3]
        } else {
          tmp = this.tableData3
        }
        const func = this.evalFunc || treeToArray
        const args = this.evalArgs ? Array.concat([tmp, true], this.evalArgs) : [tmp, true];
        this.maxLength =(func.apply(null, args)).length;
        return func.apply(null, args)
      }
    },
    mounted(){
        this.initData();
        this.getElementData();
        console.log(this.height)
    }
  })
</script>
<style  scoped="">
  .userTable{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
  }
  .userTable >>> .el-table{
    margin-bottom: 10px;
    border:1px solid #aac983;
  }
 .userTable >>> .el-table  .has-gutter .addIcon{
    display: inline-block;
    width:17px;
    height: 15px;
    background: #afd682;
    margin-left: 6px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    background-image: url("../../static/images/add2.png");
    background-repeat: no-repeat;
    background-position: center;
  }
 .userTable >>> .el-table  >>>  .el-table__header .has-gutter th{
    text-align: center;
    background: #d3e9bb;
  }
 .userTable >>> .el-table  >>>  .el-table__header .el-table-column--selection .el-checkbox{
    display: none;
  }
 .userTable >>>  .el-table  >>> .el-table__fixed-right-patch{
    border-bottom: none;
  }
 .userTable >>>  .el-table  >>>  .el-table__header .has-gutter th .cell{
    color: #5d9120
  }
 .userTable >>>  .el-dialog__wrapper >>>.el-dialog  .el-form-item__error{
     left:390px;
     top:50%;
     -webkit-transform: transLateY(-50%);
     -moz-transform: transLateY(-50%);
     -ms-transform: transLateY(-50%);
     -o-transform: transLateY(-50%);
     transform: transLateY(-50%);
 }
 .userTable >>>  .breadClum{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    background:#f1f1f1;

  }
 .userTable >>> .breadClum span{
    float: left;
    margin-left: 10px;
  }
 .userTable >>>  .breadClum .bread1{
    color:#888888 ;
  }
 .userTable >>>  .breadClum .bread2{
    color:#699f2b ;
  }
 .userTable >>>  .directionNav{
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 22px;
    color: #333333;
  }
 .userTable >>> .navList{
    height: 60px;
    border-bottom: 1px solid #eee;
  }
 .userTable >>> .navList span{
    display: inline-block;
    padding:10px 20px;
    background: #8bc34a;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 16px;
    color: white;
    margin-right: 7px;
    margin-top: 10px;

  }
 .userTable >>> .navList .sp1{
    margin-left: 10px;
  }
 .userTable >>> .navList span.green{
    background: #769dd6;
  }
  .userTable >>> .navList span.yellow{
    background: #f2b914;
  }
 .userTable >>>  .navList span.dark{
    background: #f0ba14;
  }
  .userTable >>> .breadClum .page1 a,.breadClum .page2 a{
    color: #333;
    text-decoration: none;
    margin-left: 30px;
  }
 .userTable >>> .el-dialog .el-form .el-form-item{
   margin-bottom: 24px;
 }
 .userTable >>>   .el-form-item  .el-tree{
   width: 380px;
 }
  .userTable >>>   .el-form-item  .el-tree .el-tree-node{
   margin-top: 6px;
 }
  .userTable >>>   .el-form-item .el-tree__empty-block{
    height: 40px;
    line-height: 40px;
  }
  .userTable >>> .el-table__header  .has-gutter  .el-checkbox{
    display: none;
  }
  .userTable >>> .el-table--enable-row-transition .el-table__body td.e-table-align-left{
    text-align: left;
  }
  .userTable >>> .el-table--enable-row-transition .el-table__body td.e-table-align-left .cell{
    text-align: left !important;
  }
  .userTable >>> .el-table--enable-row-transition .el-table__body td.e-table-align-left .cell .lc-text {
    overflow: hidden;
    position: relative;
  }
  .userTable >>> .el-table--enable-row-transition .el-table__body td.e-table-align-left .cell .lc-text img{
    cursor: pointer;
    position: absolute;
    top:1px;
  }
  .userTable >>> .el-table--enable-row-transition .el-table__body td.e-table-align-left .cell .lc-text span{
    margin-left: 20px;
  }
  .userTable >>> .el-table .cell .lc-text{
    display: inline-block;
    width: 100%;
    text-align: left;
  }

  .userTable >>> .el-table  .el-table__header .has-gutter tr:nth-child(2) .cell{
    font-size: 12px;
  }

  .userTable >>>  .el-table  .el-table__fixed-header-wrapper .cell .el-checkbox {
    display: none;
  }
  .userTable >>>  .el-table th > .cell span span{
    font-weight: normal;
    font-size: 16px;
  }

  @media screen and (max-width: 1400px) {
    .userTable{
      padding: 6px;
    }
  }
</style>
